<template>
  <div :id="comId" @layout="comChanges">
    <slot :isFocus="focusSwitchState.focusId === ($el ? $el.id : '')" :isCache="($el ? $el.id : '') === focusBoxState.cacheFocusId"></slot>
  </div>
</template>
<script>
import { getUUid, getCommentInfo } from "@/hippy-focus/path/utils";
import Vue from "vue";
export default {
  name: "focus-widget",
  components: {},
  inject: {
    focusSwitchState: {
      default: {},
    },
    focusSwitchMethods: {
      default: {},
    },
    focusBoxState: {
      default: {},
    },
    focusBoxMethods: {
      default: {},
    },
  },
  data() {
    return {
      comId: getUUid(),
    };
  },
  created() {

  },
  mounted() {

  },
  computed: {

  },
  beforeDestroy() {
    this.comChanges({}, true)
  },
  methods: {
    //焦点生命周期，返回true拦截焦点跳转，返回焦点id则跳转到指定焦点
    beforeFocusChange(nextFocus, _keycode) {

    },
    //焦点修改之后生命周期
    afterFocusChange(oldFocus, _keycode) {

    },
    comChanges(postion = {}, isdelete = false) {
      const boxId = this.focusBoxMethods.getId ? this.focusBoxMethods.getId() : ""
      const _info = getCommentInfo(this, { postion, isdelete, boxId })
      if (typeof this.focusSwitchMethods.widgetChange === 'function') {
        this.focusSwitchMethods.widgetChange(_info)
      } else {
        console.error('widget组件必须包裹在switch组件内')
      }
    },
  },
  watch: {

  },
};
</script>